import QtQuick 2.0

import QtQuick 2.7

Rectangle {
    width:60;
    height:550;
    id:root;

    property int playNum : 2

    PathView {
        id:teeee
        anchors.fill:parent;
        clip: true;
        delegate:imageCard;
        model:imageCards;
        path:pathview_path;
        snapMode: PathView.SnapOneItem;

//        //禁止鼠标拖动
        interactive:false
//        这些属性设置视图中突出显示（当前项）的首选范围
        preferredHighlightBegin:0.5;
        preferredHighlightEnd:0.5;

        onMovementEnded:{
            console.log(currentIndex)
            //根据传进来的数字,来选择播放的视频
            for (var x = 0; i < 3; x++) {


            }
        }

        //固定到搜索图标
        Component.onCompleted:positionViewAtIndex(count+2,PathView.Center)

        focus: true;
        Keys.onLeftPressed: decrementCurrentIndex();
        Keys.onRightPressed: incrementCurrentIndex();

    }

    ListModel {
        id:imageCards;
        ListElement {name:"chat";src:"qrc:/chat.png";intro:"";}
        ListElement {name:"photo";src:"qrc:/photo.png";intro:"";}
        ListElement {name:"search";src:"qrc:/search.png";intro:""}
        ListElement {name:"weather";src:"qrc:/weather.png";intro:""}
        ListElement {name:"computer";src:"qrc:/computer.png";intro:""}
    }

    //路径设置
    Path {
        id: pathview_path
        startX: root.width / 2;startY:75 / 2 ;

        // 0.0
//        PathAttribute {name:"itemScale";value:0.55}
//        PathAttribute {name:"itemOpacity";value:0.4}
//        PathPercent {value:0}

        // 0.2
        PathLine {x:root.width / 2;y:(root.height / 5)+10;}
//        PathAttribute {name:"itemScale";value:0.65}
//        PathAttribute {name:"itemOpacity";value:0.5}
//        PathPercent {value:0.2}

        // 0.4
        PathLine {x:root.width / 2;y:(root.height / 5)+20;}
//        PathAttribute {name:"itemScale";value:0.85}
//        PathAttribute {name:"itemOpacity";value:0.7}
//        PathPercent {value:0.4}

        // 0.6
        PathLine {x:root.width / 2;y:(root.height / 5)+30;}
//        PathAttribute {name:"itemScale";value:1}
//        PathAttribute {name:"itemOpacity";value:1}
//        PathPercent {value:0.6}

        // 0.8
        PathLine {x:root.width / 2;y:(root.height / 5)+40;}
//        PathAttribute {name:"itemScale";value:0.65}
//        PathAttribute {name:"itemOpacity";value:0.5}
//        PathPercent {value:0.8}

        // 1.0
        PathLine {x:root.width / 2;y:(root.height / 5)+50;}
//        PathAttribute {name:"itemScale";value:0.55}
//        PathAttribute {name:"itemOpacity";value:0.4}
//        PathPercent {value:1}
    }


    // 代理
    Component {
        id:imageCard;
        Rectangle {
            id:imageroot;
            width:75;
            height:75;

            scale:PathView.itemScale; //缩放属性
            opacity:PathView.itemOpacity; //透明度

            Image {
                id:imageself;
                source:src;
                //              fillMode:Image.PreserveAspectFit;
                width:imageroot.width;
                height:imageroot.height;
                anchors.top:imageroot.top;
            }

            MouseArea{
                anchors.fill: parent//鼠标检测的作用域
                hoverEnabled: true//开启鼠标滑过检测
                onEntered: {
                    //鼠标进入事件
//                    console.log("鼠标进入事件")
                }
                onExited: {
                    //鼠标离开事件
//                    console.log("鼠标离开事件")
                }

                onClicked:function() {
                    console.log("鼠标点击事件")
                    console.log(index)

                    var upnum = playNum
                    var returnNum = 0
                    var clickpos = "down"

                    for (var i = 0;i < 2 ;i++) {
                        clickpos = "down"

                        returnNum ++
                        upnum ++
                        if (upnum > 4) {
                            upnum = 0
                        }

                        if (upnum === index) {
                            clickpos = "up"
                            for (returnNum; returnNum > 0; returnNum--){
                                teeee.incrementCurrentIndex();

                            }
                            break;
                        }
                    }

                    if (clickpos === "down") {
                        var downnum = playNum
                        returnNum = 0
                        for (i = 0;i < 2 ;i++) {
                            returnNum ++
                            downnum --

                            if (downnum < 0) {
                                downnum = 4
                            }

                            if (downnum === index) {
                                for (returnNum; returnNum > 0; returnNum --){
                                    teeee.decrementCurrentIndex();

                                }
                                break;
                            }
                        }
                    }
                    playNum = index
                }
            }
        }
    }
}

//import QtQuick 2.0
//import QtQuick.Controls 1.1

//Rectangle {
//    width: 480;
//    height: 300;
//    color: "black";
//    id: root;

//    Component {
//        id: rectDelegate;
//        Item {
//            id: wrapper;
//            z: PathView.zOrder;
//            opacity: PathView.itemAlpha;
//            scale: PathView.itemScale;
//            Rectangle {
//                width: 100;
//                height: 60;
//                color: Qt.rgba(Math.random(), Math.random(), Math.random(), 1);
//                border.width: 2;
//                border.color: wrapper.PathView.isCurrentItem ? "red" : "lightgray";
//                Text {
//                    anchors.centerIn: parent;
//                    font.pixelSize: 28;
//                    text: index;
//                    color: Qt.lighter(parent.color, 2);
//                }
//            }
//        }
//    }

//    PathView {
//        id: pathView;
//        anchors.fill: parent;
//        interactive: true;
//        pathItemCount: 7;
//        preferredHighlightBegin: 0.5;
//        preferredHighlightEnd: 0.5;
//        highlightRangeMode: PathView.StrictlyEnforceRange;

//        delegate: rectDelegate;
//        model: 15;

//        path:Path {
//            startX: 10;
//            startY: 100;
//            PathAttribute { name: "zOrder"; value: 0 }
//            PathAttribute { name: "itemAlpha"; value: 0.1 }
//            PathAttribute { name: "itemScale"; value: 0.6 }
//            PathLine {
//                x: root.width/2 - 40;
//                y: 100;
//            }
//            PathAttribute { name: "zOrder"; value: 10 }
//            PathAttribute { name: "itemAlpha"; value: 0.8 }
//            PathAttribute { name: "itemScale"; value: 1.2 }
//            PathLine {
//                relativeX: root.width/2 - 60;
//                relativeY: 0;
//            }
//            PathAttribute { name: "zOrder"; value: 0 }
//            PathAttribute { name: "itemAlpha"; value: 0.1 }
//            PathAttribute { name: "itemScale"; value: 0.6 }
//        }

//        focus: true;
//        Keys.onLeftPressed: decrementCurrentIndex();
//        Keys.onRightPressed: incrementCurrentIndex();
//    }
//}


